import React, { Component } from 'react';
import { Modal, Form, Input, Button, message,Select, Radio, InputNumber } from 'antd';
import { FormInstance } from 'antd/lib/form';
import { addModelInput } from 'src/services/DataManage/type';
import { createModel, getModelTree } from 'src/services/DataManage';

interface Iprops {
	modalVisible:any
	modalVisibleValue:boolean
	addetlState:any
	setEtlDatafunc:any
}

const weekOptions = [
	{ label: '星期一', value: 1 },
	{ label: '星期二', value: 2 },
	{ label: '星期三', value: 3 },
	{ label: '星期四', value: 4 },
	{ label: '星期五', value: 5 },
	{ label: '星期六', value: 6 },
	{ label: '星期日', value: 7 }
];

class AddSourceModal extends Component<Iprops,any> {
	
	state = {
		treeData: [],
		jobType: null
	}
	
    formRef = React.createRef<FormInstance>()

	//	新增/编辑
	handleCreate = async ( data: addModelInput ) => {
		let saveInfo = { 'isFile': 0, 'parentCode': 0, 'position': 0 ,...data };
		const result = await createModel( { data: saveInfo } );
		if ( result.data && result.data.success ) {
			message.success( '新建数据整理成功' );
			this.props.modalVisible( 'sourceModalVisible', false );
			this.formRef.current.resetFields();
			//将数据请求的elt最新的模板数据保存到全局的state
			this.props.setEtlDatafunc( result.data.data );
			// 修改addETL状态为true
			this.props.addetlState( 'addETL', true );
		}
	};


	//添加elt模板
    handleModalOk = () => {
    	// this.props.SouceModal( false );
    	this.formRef.current.validateFields().then( value => {
    		const { jobType, dayOfMonths, dayOfWeeks, hour, minute } = value;
    		const cronData = { jobType, dayOfMonths: dayOfMonths ? [ dayOfMonths ] : null, dayOfWeeks, hour, minute, second: 0 };
    		const data = {
    			'comments': value.comments,
    			'name': value.name,
    			'parentCode': value.parentCode,
    			'cronData': cronData.jobType ? JSON.stringify( cronData ) : null,
    		};
    		//添加ETL流操作
    		this.handleCreate( data );

    	} );
    }


	handlCancel = () => {
    	this.props.modalVisible( 'sourceModalVisible',false );
	}

	onSelect = ( keys, event ) => {
	};

	onExpand = () => {
	};

	getModelFiles = async () => {
		const info = await getModelTree( { data: '' } );
		if( info.data.success ) {
			this.setState( {
				treeData: info.data.data
			} );
			if ( info.data.data.length ) {
				this.formRef.current.setFieldsValue( { parentCode: info.data.data[0].code } );
			}
		}
	}

	jobTypeChange = ( e ) => {
		this.setState( {
			jobType: e.target.value
		} );
	}
	
	componentDidMount(): void {
		this.getModelFiles();
	}

	render() {
	  const  layout = {
			labelCol: { span: 6 },
			wrapperCol: { span: 18 },
		};
		const taskConfig = [
			{
				name: 'jobType',
				label: '定时配置',
				hide: false,
				component: <Radio.Group onChange={ this.jobTypeChange }>
					{/* <Radio.Button value={0}>每分钟</Radio.Button> */}
					<Radio.Button value={4}>每小时</Radio.Button>
					<Radio.Button value={1}>每天</Radio.Button>
					<Radio.Button value={3}>每周</Radio.Button>
					<Radio.Button value={2}>每月</Radio.Button>
				</Radio.Group>
			},
			{
				name: 'dayOfMonths',
				label: '日期',
				hide: this.state.jobType !== 2,
				initialValue: 1,
				rules: [ { required: true, message: '请输入日期' } ],
				component: <InputNumber min={1} max={31} />
			},
			{
				name: 'dayOfWeeks',
				label: '星期几',
				hide: this.state.jobType !== 3,
				initialValue: [ 1 ],
				rules: [ { required: true, message: '请选择星期几' } ],
				component: <Select mode="multiple" allowClear>
					{
						weekOptions.map( item => {
							return (
								<Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
							);
						} )
					}
				</Select>
			},
			{
				name: 'hour',
				label: '小时点',
				hide: [ 0, 4, null ].includes( this.state.jobType ),
				initialValue: 1,
				rules: [ { required: true, message: '请输入小时点' } ],
				component: <InputNumber min={0} max={23} />
			},
			{
				name: 'minute',
				label: '分钟点',
				hide: this.state.jobType < 1,
				initialValue: 0,
				rules: [ { required: true, message: '请输入分钟点' } ],
				component: <InputNumber min={0} max={59} />
			},
			/* {
						name: 'second',
						label: '秒数',
						hide: this.state.jobType === null,
						initialValue: 0,
						rules: [ { required: true, message: '请输入秒数' } ],
						component: <InputNumber min={0} max={59} />
					}, */
		];
		return (
    	<div>
				<Modal destroyOnClose
					   onCancel={this.handlCancel}
					   centered={true}
					   visible={this.props.modalVisibleValue}
					   forceRender={true} mask={false} maskClosable={false}
					   footer={<Button type="primary" onClick={this.handleModalOk}>添加</Button>}
					title="新建数据整理">
					<Form {...layout}
						ref={this.formRef}
						name="nest-messages">
						<Form.Item  label="数据整理名称" name="name" rules={[ { required: true, message: '请输入数据整理名称' } ]}>
							<Input />
						</Form.Item>
						<Form.Item  label="描述" name="comments">
							<Input />
						</Form.Item>
						<Form.Item label="选择文件夹" name="parentCode">
							<Select>
								{
									this.state.treeData.map(
										item => (
											<Select.Option key={item.id} value={item.code}>{item.name}</Select.Option>
										)
									)
								}
							</Select>
						</Form.Item>
						{
							taskConfig.map( ( v, i ) => {
								return v.hide ? null : (
									<Form.Item label={ v.label } name={ v.name } initialValue={ v.initialValue } rules={ v.rules } key={ `job${i}` }>
										{ v.component }
									</Form.Item>
								);
							} )
						}
					</Form>
				</Modal>
			</div>
		);
	}
}

export default AddSourceModal;